<template>
	<view class="test-container">
		<view class="test-header">
			<text class="test-title">日期工具类使用示例</text>
		</view>
		
		<!-- 获取当前时间 -->
		<view class="test-section">
			<view class="section-title">1. 获取当前时间</view>
			<view class="test-item">
				<text class="label">当前东八区时间：</text>
				<text class="value">{{ currentChinaTime }}</text>
			</view>
			<view class="test-item">
				<text class="label">本地时间：</text>
				<text class="value">{{ localTime }}</text>
			</view>
			<button class="refresh-btn" @click="refreshTime">刷新时间</button>
		</view>
		
		<!-- 格式化日期显示 -->
		<view class="test-section">
			<view class="section-title">2. 格式化日期显示</view>
			<view class="test-item">
				<text class="label">服务器时间：</text>
				<text class="value">{{ serverTime }}</text>
			</view>
			<view class="test-item">
				<text class="label">相对时间：</text>
				<text class="value">{{ formatDate(serverTime, 'relative') }}</text>
			</view>
			<view class="test-item">
				<text class="label">日期时间：</text>
				<text class="value">{{ formatDate(serverTime, 'datetime') }}</text>
			</view>
			<view class="test-item">
				<text class="label">仅日期：</text>
				<text class="value">{{ formatDate(serverTime, 'date') }}</text>
			</view>
			<view class="test-item">
				<text class="label">仅时间：</text>
				<text class="value">{{ formatDate(serverTime, 'time') }}</text>
			</view>
		</view>
		
		<!-- 时间判断功能 -->
		<view class="test-section">
			<view class="section-title">3. 时间判断功能</view>
			<view class="test-item">
				<text class="label">是否今天：</text>
				<text class="value">{{ isToday(serverTime) ? '是' : '否' }}</text>
			</view>
			<view class="test-item">
				<text class="label">是否昨天：</text>
				<text class="value">{{ isYesterday(serverTime) ? '是' : '否' }}</text>
			</view>
			<view class="test-item">
				<text class="label">是否明天：</text>
				<text class="value">{{ isTomorrow(serverTime) ? '是' : '否' }}</text>
			</view>
		</view>
		
		<!-- 超时判断 -->
		<view class="test-section">
			<view class="section-title">4. 超时判断</view>
			<view v-for="(todo, index) in testTodos" :key="index" class="todo-test-item">
				<view class="todo-info">
					<text class="todo-title">{{ todo.title }}</text>
					<text class="todo-time">{{ todo.dueDate }} {{ todo.dueTime }}</text>
				</view>
				<view class="todo-status" :class="{ overdue: isOverdue(todo) }">
					{{ isOverdue(todo) ? '已过期' : '未过期' }}
				</view>
			</view>
		</view>
		
		<!-- 时间转换 -->
		<view class="test-section">
			<view class="section-title">5. 时间转换</view>
			<view class="test-item">
				<text class="label">ISO转本地：</text>
				<text class="value">{{ isoToLocal(serverTime) }}</text>
			</view>
			<view class="test-item">
				<text class="label">时间描述：</text>
				<text class="value">{{ getTimeAgo(serverTime) }}</text>
			</view>
		</view>
		
		<view class="section">
			<text class="title">日期解析测试</text>
			<view class="test-item">
				<text class="label">测试无效格式 1:</text>
				<text class="value">{{ testInvalidDate1 }}</text>
			</view>
			<view class="test-item">
				<text class="label">测试无效格式 2:</text>
				<text class="value">{{ testInvalidDate2 }}</text>
			</view>
			<view class="test-item">
				<text class="label">测试无效格式 3:</text>
				<text class="value">{{ testInvalidDate3 }}</text>
			</view>
		</view>
		
		<view class="section">
			<text class="title">时间格式化测试 (HH:mm)</text>
			<view class="test-item">
				<text class="label">10:30:45 =></text>
				<text class="value">{{ formatTimeHHMM('10:30:45') }}</text>
			</view>
			<view class="test-item">
				<text class="label">2025-01-12 14:20:30 =></text>
				<text class="value">{{ formatTimeHHMM('2025-01-12 14:20:30') }}</text>
			</view>
			<view class="test-item">
				<text class="label">09:05:00 =></text>
				<text class="value">{{ formatTimeHHMM('09:05:00') }}</text>
			</view>
		</view>
		
		<view class="button-container">
			<button @click="testDateParsing" class="test-button">测试日期解析</button>
		</view>
	</view>
</template>

<script>
import { 
	formatDate, 
	getCurrentChinaTime, 
	isOverdue, 
	createDate,
	isToday,
	isYesterday,
	isTomorrow,
	isoToLocal,
	getTimeAgo,
	formatTimeHHMM
} from '../../utils/date'

export default {
	data() {
		return {
			currentChinaTime: '',
			localTime: '',
			serverTime: '2025-01-15 10:30:00', // 模拟服务器返回的时间
			testTodos: [
				{
					title: '今天的任务',
					dueDate: '2025-01-15',
					dueTime: '18:00',
					completed: false
				},
				{
					title: '昨天的任务（过期）',
					dueDate: '2025-01-14',
					dueTime: '15:00',
					completed: false
				},
				{
					title: '明天的任务',
					dueDate: '2025-01-16',
					dueTime: '09:00',
					completed: false
				},
				{
					title: '已完成的过期任务',
					dueDate: '2025-01-13',
					dueTime: '12:00',
					completed: true
				}
			]
		}
	},
	
	onLoad() {
		this.refreshTime()
		
		// 每秒更新时间
		this.timer = setInterval(() => {
			this.refreshTime()
		}, 1000)
	},
	
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer)
		}
	},
	
	methods: {
		// 导入的工具函数
		formatDate,
		isOverdue,
		isToday,
		isYesterday,
		isTomorrow,
		isoToLocal,
		getTimeAgo,
		formatTimeHHMM,
		
		refreshTime() {
			// 获取当前东八区时间
			this.currentChinaTime = getCurrentChinaTime()
			
			// 获取本地时间用于对比
			const now = new Date()
			this.localTime = now.toLocaleString('zh-CN')
		},
		
		// 演示如何安全创建日期对象
		createSafeDate(dateStr) {
			return createDate(dateStr)
		},
		
		testDateParsing() {
			console.log('=== 日期解析测试 ===');
			const testCases = [
				', 09:15:00',
				',  10:00:00', 
				'09:30:00',
				'2025-01-12 10:00:00',
				'2025-01-12',
				''
			];
			
			testCases.forEach((testCase, index) => {
				const result = this.formatDate(testCase, 'relative');
				console.log(`测试 ${index + 1}: "${testCase}" => "${result}"`);
			});
		}
	}
}
</script>

<style scoped>
.test-container {
	padding: 30rpx;
	background: #f5f5f5;
	min-height: 100vh;
}

.test-header {
	text-align: center;
	margin-bottom: 40rpx;
}

.test-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.test-section {
	background: white;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #007AFF;
	margin-bottom: 20rpx;
	border-bottom: 2rpx solid #e0e0e0;
	padding-bottom: 10rpx;
}

.test-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.test-item:last-child {
	border-bottom: none;
}

.label {
	font-size: 26rpx;
	color: #666;
	flex: 1;
}

.value {
	font-size: 26rpx;
	color: #333;
	font-weight: 500;
	flex: 1;
	text-align: right;
}

.refresh-btn {
	margin-top: 20rpx;
	background: #007AFF;
	color: white;
	border: none;
	border-radius: 8rpx;
	padding: 15rpx 30rpx;
	font-size: 24rpx;
}

.todo-test-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	margin: 15rpx 0;
	background: #f9f9f9;
	border-radius: 8rpx;
	border-left: 4rpx solid #e0e0e0;
}

.todo-test-item .todo-status.overdue {
	color: #ff4757;
	font-weight: bold;
}

.todo-info {
	flex: 1;
}

.todo-title {
	font-size: 26rpx;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.todo-time {
	font-size: 22rpx;
	color: #999;
}

.todo-status {
	font-size: 24rpx;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	background: #e8f5e8;
	color: #2ed573;
}

.todo-status.overdue {
	background: #ffe8e8;
	color: #ff4757;
}

.section {
	margin-bottom: 30rpx;
}

.title {
	font-size: 28rpx;
	font-weight: bold;
	color: #007AFF;
	margin-bottom: 20rpx;
	border-bottom: 2rpx solid #e0e0e0;
	padding-bottom: 10rpx;
}

.button-container {
	text-align: center;
	margin-top: 20rpx;
}

.test-button {
	background: #007AFF;
	color: white;
	border: none;
	border-radius: 8rpx;
	padding: 15rpx 30rpx;
	font-size: 24rpx;
}
</style> 